const webpack = require('webpack')
const es3ifyPlugin = require('es3ify-webpack-plugin')
const HtmlWebPackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const path = require('path')

const argv = process.argv
const env = argv.indexOf('production') >= 0 ? 'production' : 'development'

const webPackConfig = {
    mode: env,

    entry: ['babel-polyfill', 'es5-shim', 'es5-shim/es5-sham', './src/index.tsx'],

    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'static/js/[name].js',
        publicPath: '/'
    },

    module: {
        rules: [
            {
                test: /\.(js|jsx|ts|tsx)$/,
                exclude: /node_modules/,
                use: 'babel-loader'
            },
            {
                test: /\.(sa|sc|le|c)ss$/,
                // include: path.resolve(__dirname, 'src/assets/style'),
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            },
            // {
            //     test: /\.(sa|sc|le|c)ss$/,
            //     exclude: path.resolve(__dirname, 'src/assets/style'),
            //     use: [
            //         MiniCssExtractPlugin.loader,
            //         {
            //             loader: 'css-loader',
            //             options: {
            //                 modules: {
            //                     localIdentName: '[local]-[hash:5]'
            //                 }
            //             }
            //         }
            //     ]
            // },
            {
                test: /\.(jpg|png|gif)$/,
                loader: 'url-loader?name=static/images/[name].[ext]'
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                loader: 'url-loader?name=static/fonts/[name].[ext]'
            }
        ]
    },

    resolve: {
        symlinks: true,
        extensions: ['.ts', '.tsx', '.js', '.jsx'],
        alias: {
            '@': path.resolve('src'),
            react: 'anujs/dist/ReactIE',
            'react-dom': 'anujs/dist/ReactIE',
            router: 'anujs/dist/Router.js',
            // 如果引用了 prop-types 或 create-react-class
            // 需要添加如下别名
            'prop-types': 'anujs/lib/ReactPropTypes',
            'create-react-class': 'anujs/lib/createClass'
        }
    },

    optimization: {
        minimizer: [
            new OptimizeCssAssetsPlugin({}),
            new UglifyJsPlugin({
                sourceMap: true,
                exclude: /node_modules/,
                uglifyOptions: {
                    ie8: true,
                    compress: {
                        properties: false
                    }
                }
            })
        ]
    },

    plugins: [
        new es3ifyPlugin(),
        new HtmlWebPackPlugin({
            filename: './index.html',
            template: './public/index.html',
            favicon: './public/favicon.ico',
            title: 'Anu(React) IE8',
            hash: true,
            inject: 'head',
            scriptLoading: 'defer'
        }),
        new MiniCssExtractPlugin({
            filename: 'static/style/[name].css',
            chunkFilename: 'static/style/[id].css'
        }),
        new webpack.BannerPlugin(new Date().toString())
    ]
}

if (env == 'production') {
    webPackConfig.devtool = webPackConfig.output.publicPath = './'
    webPackConfig.plugins.push(new CleanWebpackPlugin())
}

module.exports = webPackConfig
